import { useRouter } from "next/router";
import AppBar from "../../../../components/AppBar";
import Layout from "../../../../components/Layout";
import WithAuth from "../../../../components/WithAuth";
import { useAuth } from "../../../../helpers/auth";
import useFormValidation from "../../../../helpers/formValidation";
import { useEffect, useState } from "react";
import apiOdoo from "../../../../helpers/apiOdoo";
import ReactSelect from "react-select";
import convertToOption from "../../../../helpers/convertToOption";
import { toast } from "react-hot-toast";
import _ from "lodash";

const validationScheme = {
  type: ['label:Label Alamat', 'required'],
  name: ['label:Nama', 'required'],
  email: ['label:Email', 'required', 'email'],
  mobile: ['label:No. Handphone', 'required', 'maxLength:16'],
  street: ['label:Alamat', 'required'],
  city: ['label:Kota', 'required'],
  zip: ['label:Kode Pos', 'required']
};

const typesSelection = [
  { value: 'contact', label: 'Contact Address' },
  { value: 'invoice', label: 'Invoice Address' },
  { value: 'delivery', label: 'Delivery Address' },
  { value: 'other', label: 'Other Address' },
];

export async function getServerSideProps( context ) {
  const { id } = context.query;
  const address = await apiOdoo('GET', `/api/v1/partner/${id}/address`);
  let initialFormValue = {
    type: typesSelection.find((x) => x.value == address.type), 
    name: address.name, 
    email: address.email,
    mobile: address.mobile,
    street: address.street,
    zip: address.zip,
    city: convertToOption(address.city),
    district: convertToOption(address.district),
    subDistrict: convertToOption(address.sub_district)
  };
  return { props: { id, initialFormValue } };
}

export default function EditAddress({ id, initialFormValue }) {
  const [auth] = useAuth();
  const router = useRouter();

  // Master Data
  const [cities, setCities] = useState([]);
  const [districts, setDistricts] = useState([]);
  const [subDistricts, setSubDistricts] = useState([]);

  const {
    formInputs,
    formErrors,
    handleInputChange,
    handleSelectChange,
    handleFormSubmit,
    hasChangedInputs
  } = useFormValidation({ validationScheme, initialFormValue });

  useEffect(() => {
    if (cities.length == 0) {
      const loadCities = async () => {
        let dataCities = await apiOdoo('GET', '/api/v1/city');
        dataCities = dataCities.map((city) => ({ value: city.id, label: city.name }));
        setCities(dataCities);
      };
      loadCities();
    }
  }, [cities]);
  
  useEffect(() => {
    if (hasChangedInputs?.city) handleSelectChange('district', null);
    if (formInputs.city) {
      const loadDistricts = async () => {
        let dataDistricts = await apiOdoo('GET', `/api/v1/district?city_id=${formInputs.city.value}`);
        dataDistricts = dataDistricts.map((district) => ({ value: district.id, label: district.name }));
        setDistricts(dataDistricts);
      };
      loadDistricts();
    }
  }, [ formInputs.city, hasChangedInputs.city, handleSelectChange ]);

  useEffect(() => {
    if (hasChangedInputs?.district) handleSelectChange('subDistrict', null);
    if (formInputs.district) {
      const loadSubDistricts = async () => {
        let dataSubDistricts = await apiOdoo('GET', `/api/v1/sub_district?district_id=${formInputs.district.value}`);
        dataSubDistricts = dataSubDistricts.map((subDistrict) => ({ value: subDistrict.id, label: subDistrict.name }));
        setSubDistricts(dataSubDistricts);
      };
      loadSubDistricts();
    }
  }, [ formInputs.district, hasChangedInputs.district, handleSelectChange ]);

  const onSubmit = async () => {
    const parameters = {
      ...formInputs,
      city_id: formInputs.city?.value,
      district_id: formInputs.district?.value,
      sub_district_id: formInputs.subDistrict?.value,
      type: formInputs.type?.value
    };
    
    const address = await apiOdoo('PUT', `/api/v1/partner/${id}/address`, parameters);
    if (address?.id) {
      toast.success('Berhasil mengubah alamat');
      router.back();
    }
  }

  return (
    <WithAuth>
      <Layout>
        <AppBar title="Ubah Alamat" />

        { !_.isEmpty(formInputs) && (
          <form className="px-4 pb-4" onSubmit={(e) => handleFormSubmit(e, onSubmit)}>
            <label className="form-label mt-4 mb-2">Label Alamat</label>
            <ReactSelect
              placeholder="Pilih label alamat..."
              classNamePrefix="form-select"
              options={typesSelection}
              name="type"
              onChange={(value) => handleSelectChange('type', value)}
              value={formInputs?.type}
            />
            <div className="text-caption-2 text-red_r-11 mt-1">{formErrors?.type}</div>

            <label className="form-label mt-4 mb-2">Nama Kontak</label>
            <input 
              type="text"
              className='form-input' 
              placeholder="John Doe"
              name="name"
              onChange={handleInputChange}
              value={formInputs.name}
              aria-invalid={formErrors?.name}
            />
            <div className="text-caption-2 text-red_r-11 mt-1">{formErrors?.name}</div>

            <label className="form-label mt-4 mb-2">Email</label>
            <input 
              type="text"
              className='form-input'  
              placeholder="johndoe@gmail.com"
              name="email"
              value={formInputs.email}
              onChange={handleInputChange}
              aria-invalid={formErrors?.email}
            />
            <div className="text-caption-2 text-red_r-11 mt-1">{formErrors?.email}</div>

            <label className="form-label mt-4 mb-2">No. Handphone</label>
            <input 
              type="number"
              className='form-input'  
              placeholder="08xxxxxxxx"
              name="mobile"
              value={formInputs.mobile}
              onChange={handleInputChange}
              aria-invalid={formErrors?.mobile}
            />
            <div className="text-caption-2 text-red_r-11 mt-1">{formErrors?.mobile}</div>

            <label className="form-label mt-4 mb-2">Alamat</label>
            <input 
              type="text"
              className='form-input'  
              placeholder="Jl. Bandengan Utara"
              name="street"
              value={formInputs.street}
              onChange={handleInputChange}
              aria-invalid={formErrors?.street}
            />
            <div className="text-caption-2 text-red_r-11 mt-1">{formErrors?.street}</div>

            <label className="form-label mt-4 mb-2">Kode Pos</label>
            <input 
              type="number"
              className='form-input'
              placeholder="10100"
              name="zip"
              value={formInputs.zip}
              onChange={handleInputChange}
              aria-invalid={formErrors?.zip}
            />
            <div className="text-caption-2 text-red_r-11 mt-1">{formErrors?.zip}</div>

            <label className="form-label mt-4 mb-2">Kota</label>
            <ReactSelect
              placeholder="Pilih kota..."
              classNamePrefix="form-select"
              classNames={{ control: (state) => state.menuIsOpen || state.isFocused ? '!border-yellow_r-9' : '' }}
              options={cities}
              value={formInputs.city}
              onChange={(value) => handleSelectChange('city', value)}
            />
            <div className="text-caption-2 text-red_r-11 mt-1">{formErrors?.city}</div>

            <label className="form-label mt-4 mb-2">Kecamatan <span className="text-gray_r-10">(opsional)</span></label>
            <ReactSelect
              placeholder="Pilih Kecamatan..."
              classNamePrefix="form-select"
              classNames={{ control: (state) => state.menuIsOpen || state.isFocused ? '!border-yellow_r-9' : '' }}
              options={districts}
              value={formInputs.district}
              onChange={(value) => handleSelectChange('district', value)}
              isDisabled={!formInputs.city}
            />

            <label className="form-label mt-4 mb-2">Kelurahan <span className="text-gray_r-10">(opsional)</span></label>
            <ReactSelect
              placeholder="Pilih Kelurahan..."
              classNamePrefix="form-select"
              classNames={{ control: (state) => state.menuIsOpen || state.isFocused ? '!border-yellow_r-9' : '' }}
              options={subDistricts}
              onChange={(value) => handleSelectChange('subDistrict', value)}
              value={formInputs.subDistrict}
              isDisabled={!formInputs.district}
            />

            <button 
              type="submit" 
              className="btn-yellow mt-6 w-full"
            >
              Simpan
            </button>
          </form>
        ) }
      </Layout>
    </WithAuth>
  ); 
}